<template>

  <div class="home-wrap">
  <div class="header">
    <div class="header-content">
      <div class="banner">
        <img alt="Vue logo" style="width: 64px; height: 64px" src="../../assets/logo.png">
        <div class="text">
          <h3  >酷腾实验资源管理平台</h3>
          <p  >创新教育，赋能未来</p>
        </div>
      </div>
      <div class="header-tabs">
        <a-tabs defaultActiveKey="3" style="margin-top: 20px" @change="gotab">
          <a-tab-pane tab="器材" key="1" >
          </a-tab-pane>
          <a-tab-pane tab="资源" key="2" >
          </a-tab-pane>
          <a-tab-pane tab="实验" key="3" >
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="header-user">
        <user-menu></user-menu>
      </div>
    </div>
  </div>

  <div class="home page-header-wrapper-grid-content-main">
    <a-row :gutter="24">
      <a-col :md="24" :lg="7">
        <a-card :bordered="false">
          <div class="account-center-avatarHolder">
            <div class="avatar">
              <img width="200" :src="row.pic_url">
            </div>
            <div class="username">{{ row.name }}</div>
            <div class="bio">{{row.explain}}</div>
          </div>
          <div class="account-center-detail">
            <p>
              <i class="group"></i>年级 {{row.grade_name}}
            </p>
            <p>
              <i class="title"></i>学科  {{row.subject_name}}
            </p>
            <p>
              <i class="title"></i>器材
              <a-tag v-for="mname in row.material_name">
                {{mname}}
              </a-tag>
            </p>
          </div>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="17">
        <a-card
                style="width:100%"
                :bordered="false"
        >


          <a-tabs defaultActiveKey="1"  >
            <a-tab-pane tab="内容" key="1">
              <div v-html="row.content"></div>
            </a-tab-pane>
            <a-tab-pane tab="要求" key="2">
              <div v-html="row.demand"></div>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
  </div>

</template>

<script>
  // @ is an alias to /src

  import Trend from '@/components/Trend'
  import AvatarList from '@/components/AvatarList'
  import CountDown from '@/components/CountDown/CountDown'
  import Ellipsis from '@/components/Ellipsis'
  import NumberInfo from '@/components/NumberInfo'
  import STable from '@/components/table/'
  import UserMenu from '@/components/tools/UserMenu'



  import {
    experimentDetail,
  } from '@/api/experiment'

  export default {
    name: 'Home',
    components: {
      NumberInfo,
      Ellipsis,
      CountDown,
      Trend,
      UserMenu
    },
    data () {
      return {
        targetTime: new Date().getTime() + 3900000,
        queryParam:{

        },
        advanced:false,
        loading:false,


        selectedRowKeys: [],
        selectedRows: [],
        row:{
          id: this.$route.query.id,
          material_name:[],
        }

      }
    },
    mounted(){
      let that = this;
      that.fetch();
    },
    methods: {
      gotab(index){
        console.log(index)
        switch (index) {
          case '1' :
            this.$router.push({name:'HomeMaterialList'});
            break;
          case '2' :
            this.$router.push({name:'HomeResourseList'});
            break;
          case '3' :
            this.$router.push({name:'HomeExperimentList'});
            break;

        }
      },
      fetch(){
        let that  =this;
        experimentDetail({
          id:that.row.id
        }).then(res =>{
          that.row = res.data;

        })
      },
    }
  }
</script>

<style>

  .header-tabs   .ant-tabs-bar{
    border: none !important;
  }

  .header-user .action {
    cursor: pointer;
    padding: 0 12px;
    display: inline-block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height: 100%;
  }
  .header-user .avatar {
    margin: 20px 8px 20px 0;
    color: #1890ff;
    background: hsla(0, 0%, 100%, 0.85);
    vertical-align: middle;
  }

</style>
<style  lang="less" scoped>

  .home-wrap{
    background-color: #F0F2F9;
  }
  .header{
    height: 74px;
    padding: 0 12px 0 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    position: fixed;
    top:0;
    left: 0;
    z-index: 10;
    right: 0;
  }
  .header-content{
    width: 1200px;
    margin: 0 auto;
    padding: 10px 0 ;
  }
  .header-content .banner{
    float: left;
    margin-right: 20px;
  }
  .header-content .banner img {
    float: left;
    margin-right: 10px;
  }
  .header-content .banner .text {
    float: left;
    width: 200px;
  }
  .header-content .header-tabs{
    float: left;
  }
  .header-content .header-user{
    float: right;
  }
  .home {
    width: 1200px;
    margin: 64px auto;
    padding: 25px 0;
  }
  .home > .banner {
    text-align: center;
    padding: 25px 0;
    margin: 25px 0;
  }
  .page-header-wrapper-grid-content-main {
    transition: 0.3s;

    .account-center-avatarHolder {
      text-align: center;
      margin-bottom: 24px;

      & > .avatar {
        margin: 0 auto;
        width: 104px;
        height: 104px;
        margin-bottom: 20px;
        border-radius: 50%;
        overflow: hidden;
        img {
          height: 100%;
          width: 100%;
        }
      }

      .username {
        color: rgba(0, 0, 0, 0.85);
        font-size: 20px;
        line-height: 28px;
        font-weight: bold;
        margin-bottom: 4px;
      }
    }

    .account-center-detail {
      p {
        margin-bottom: 8px;
        padding-left: 26px;
        position: relative;
      }

      i {
        position: absolute;
        height: 14px;
        width: 14px;
        left: 0;
        top: 4px;
        background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
      }

      .title {
        background-position: 0 0;
      }
      .group {
        background-position: 0 -22px;
      }
      .address {
        background-position: 0 -44px;
      }
    }

    .account-center-tags {
      .ant-tag {
        margin-bottom: 8px;
      }
    }

    .account-center-team {
      .members {
        a {
          display: block;
          margin: 12px 0;
          line-height: 24px;
          height: 24px;
          .member {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 24px;
            max-width: 100px;
            vertical-align: top;
            margin-left: 12px;
            transition: all 0.3s;
            display: inline-block;
          }
          &:hover {
            span {
              color: #1890ff;
            }
          }
        }
      }
    }

    .tagsTitle,
    .teamTitle {
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 12px;
    }
  }
</style>
